﻿<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>jQuery图片放大变小切换代码 - 站长素材</title>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.banner.js"></script>

<style type="text/css"> 
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}

.banner{width:100%;overflow:hidden;height:470px;position:relative}
.banList{position:absolute;left:50%;margin-left:-960px;height:470px}
.banList li{height:470px;opacity:0;position:absolute;transform:scale(0);transition:transform 0.5s ease 0s, opacity 1.5s ease 0s;z-index:1;}
.banList li.active{opacity:1;transform:scale(1);z-index:2;}
.fomW{position:absolute;bottom:20px;left:50%;height:20px;z-index:9;width:1000px;margin-left:-500px}
.jsNav{text-align:center;}
.jsNav a{display:inline-block;background:#fff;width:15px;height:15px;border-radius:50%;margin:0 5px;}
.jsNav a.current{background:#fc8f0f;cursor:pointer}
</style>

</head>
<body>

<div class="banner">
	<ul class="banList">
		<li class="active"><a href="http://sc.chinaz.com/"><img src="images/img1.jpg"/></a></li>
		<li><a href="http://sc.chinaz.com/"><img src="images/img2.jpg"/></a></li>
		<li><a href="http://sc.chinaz.com/"><img src="images/img3.jpg"/></a></li>
	</ul>
	<div class="fomW">
		<div class="jsNav">
			<a href="javascript:;" class="trigger current"></a>
			<a href="javascript:;" class="trigger"></a>
			<a href="javascript:;" class="trigger"></a>
		</div>
	</div>
</div>
	
<script type="text/javascript"> 
$(function(){
	$(".banner").swBanner();
});
</script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
</div>
</body>
</html>